<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>


<div id="app">

</div>

<script type="text/javascript">
    /*声明式编程
    *   jsp         el  ${username}
    *   vue      {{name}}  {{age}}  {{stuNo}}   插值语法
    *   vue插值语法在使用时  可以进行一些基本数学运算和函数的调用
    *   vue插值语法在使用时 识别不了html标签
    * */
    const vm = new Vue({
        template: `
            <div>
                <h1>学生信息展示</h1>
                <p>学生姓名:{{name.toUpperCase()}}</p>
                <p>学生年龄:{{age+10}}</p>
                <p>学生学号:{{stuNo}}</p>
            </div>
        `,
        data: {
            name: 'jack',
            age: 18,
            stuNo: '<b>2023002</b>'
        }
    })

    vm.$mount("#app")

</script>

</body>
</html>
